<template>
    <view class="container">
      <!-- 顶部 Banner -->
        <uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
          :dots-styles="dotsStyles" field="content">
          <swiper class="swiper-box" @change="change" :current="swiperDotIndex">
            <swiper-item v-for="(item, index) in 3" :key="index">
                <image class="banner-img" style="border-radius: 6rpx;height: 100%;width: 100%;border-radius: 10rpx;" src="@/static/images/banner.png" mode="widthFix" />
            </swiper-item>
          </swiper>
        </uni-swiper-dot>
  
      <!-- 推荐观看 -->
      <view class="section">
        <view class="section-header">
          <text>推荐观看</text>
        </view>
        <view class="recommend-list" >
          <view class="recommend-card" v-for="item in recommendList" @click="goToDetails(item)" :key="item.id">
            <image class="recommend-img" :src="item.img" mode="aspectFill" />
            <text class="recommend-title">{{ item.title }}</text>
          </view>
        </view>
      </view>
    </view>
  </template>
  
  <script setup>
  import { ref } from 'vue'

  
  const recommendList = ref([
    {
      id: 1,
      img: 'https://jiushenggu.oss-cn-nanjing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250605103745.png',
      mp4:'https://jiushenggu.oss-cn-nanjing.aliyuncs.com/WeChat_20250605103759.mp4',
      title: '玖盛谷台球俱乐部',
      desc: '超级直播',
    },
    {
      id: 2,
      img: 'https://jiushenggu.oss-cn-nanjing.aliyuncs.com/b6999ef1ee3bb886ca421ce4bc03c2f.jpg',
      mp4:'https://jiushenggu.oss-cn-nanjing.aliyuncs.com/c25b70a6f04e96ae757c543ca4ce8346.mp4',
      title: '玖盛谷台球俱乐部',
      desc: '超级直播',
    },
    {
      id: 3,
      img: 'https://jiushenggu.oss-cn-nanjing.aliyuncs.com/c5c45e3db707b12eb8f798127577afb.jpg',
      mp4:'https://jiushenggu.oss-cn-nanjing.aliyuncs.com/bef0ad31b32b81258d3c4fc57a6b5189.mp4',
      title: '玖盛谷台球俱乐部',
      desc: '超级直播',
    },
    {
      id: 4,
      img: 'https://jiushenggu.oss-cn-nanjing.aliyuncs.com/7dc53d37d329658037d9ad0e90b22ac.jpg',
      mp4:'https://jiushenggu.oss-cn-nanjing.aliyuncs.com/51e788c2d2658994ea901756d2e9cdec.mp4',
      title: '玖盛谷台球俱乐部',
      desc: '超级直播',
    },

      

  ])
  
  const current = ref(0)
  const mode = ref('dot')
  const dotsStyles = ref({
    backgroundColor: '#fff',
    borderRadius: '50%',
    width: '10rpx',
    height: '10rpx',
  })
  const goToDetails = (e) =>{
    // 跳转视频详情页
    uni.navigateTo({
       url: '/pages/video/videoDetail?item='+JSON.stringify(e)
    });
  }

  </script>
  
  <style scoped>
    .uni-swiper-dot-box{
      border-radius: 10rpx;
      overflow: hidden;
    }
  .swiper-item{
    height: 400rpx;
    overflow: hidden;
    border-radius: 10rpx;
  }
  .container {
    background: #f7f7f7;
    min-height: 100vh;
    padding-bottom: 20rpx;
    padding: 30rpx;
    padding-top: 10rpx;
  }
  .banner {
    position: relative;
    background: #fff;
    padding: 20rpx;
    border-radius: 20rpx;
    margin: 20rpx;
    box-shadow: 0 2rpx 8rpx #eee;
  }
  .live-tag {
    position: absolute;
    top: 20rpx;
    left: 20rpx;
    background: #ff6600;
    color: #fff;
    padding: 4rpx 12rpx;
    border-radius: 20rpx;
    font-size: 20rpx;
    z-index: 2;
  }
  .banner-img {
    width: 100%;
    height: 200rpx;
    border-radius: 12rpx;
  }
  .banner-title {
    font-size: 36rpx;
    font-weight: bold;
    margin-top: 20rpx;
    color: #b11d1d;
    text-align: center;
  }
  .banner-desc {
    font-size: 24rpx;
    color: #b11d1d;
    text-align: center;
    margin-bottom: 10rpx;
  }
  .banner-video {
    width: 100%;
    height: 200rpx;
    margin-top: 10rpx;
    border-radius: 12rpx;
  }
  .section {
    /* background: #fff; */
    border-radius: 20rpx;
    /* padding: 20rpx; */
  }
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 34rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    margin-top: 30rpx;
  }
  .all-btn {
    font-size: 24rpx;
    color: #007aff;
    background: none;
    border: none;
  }
  .preview-card {
    display: flex;
    background: #f5f5f5;
    border-radius: 16rpx;
    overflow: hidden;
  }
  .preview-img {
    width: 160rpx;
    height: 120rpx;
  }
  .preview-info {
    flex: 1;
    padding: 10rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .preview-title {
    font-size: 28rpx;
    font-weight: bold;
  }
  .preview-desc {
    font-size: 22rpx;
    color: #888;
  }
  .preview-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .preview-count {
    font-size: 20rpx;
    color: #ff6600;
  }
  .preview-btn {
    background: #ff6600;
    color: #fff;
    border-radius: 20rpx;
    font-size: 22rpx;
    padding: 4rpx 16rpx;
    border: none;
  }
  .recommend-list {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .recommend-card {
    width: calc(50% - 20rpx);
    background: #fff;
    border-radius: 16rpx;
    /* margin-right: 20rpx; */
    /* padding: 10rpx; */
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    margin-bottom: 20rpx;
    height: 400rpx;
    
  }
  .recommend-img {
    width: 100%;
    height: 300rpx;
    border-radius: 12rpx;
  }
  .recommend-title {
    font-size: 28rpx;
    font-weight: bold;
    margin-top: 10rpx;
    color: #333232;
    margin-left: 10rpx;
  }
  .recommend-desc {
    font-size: 20rpx;
    color: #888;
  }
  </style>